<template>
  <view :style="{height: pageHeight, overflow: 'hidden'}">
    <search @search="disableScroll" />

    <!-- 焦点图 -->
    <swiper class="banner" indicator-dots indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#fff">
      <swiper-item v-for="item in swiperArr" :key="item.goods_id">
        <navigator :url="'/pages/goods/index?id='+ item.goods_id">
          <image :src="item.image_src"></image>
        </navigator>
      </swiper-item>
    </swiper>

    <!-- 导航条 -->
    <view class="navs">
      <navigator open-type="switchTab" url="/pages/category/index" v-for="item in navArr" :key="item.name">
        <image :src="item.image_src"></image>
      </navigator>
    </view>

    <!-- 楼层 -->
    <view class="floors">
      <view class="floor" v-for="(item,index) in floorsArr" :key="index">
        <!-- 楼层的 标题区域 -->
        <view class="title">
          <image :src="item.floor_title.image_src"></image>
        </view>

        <!-- 楼层的 图片区域 -->
        <view class="items">
          <navigator url="/pages/list/index" v-for="img in item.product_list" :key="img.name">
            <image :src="img.image_src"></image>
          </navigator>
        </view>
      </view>
    </view>

    <!-- 回到顶部 -->
    <view class="goTop icon-top" v-if="isShow" @tap="goTop"></view>
  </view>
</template>

<script>
  import search from '@/components/search';

  export default {

    data () {
      return {
        pageHeight: 'auto',

        swiperArr:[], // 轮播图数据
        navArr:[], // 导航栏数据
        floorsArr:[], // 楼层数据

        isShow:false // 返回顶部 的按钮 显状态  默认不显示
      }
    },

    components: {
      search
    },
    
    methods: {
      disableScroll (ev) {
        this.pageHeight = ev.pageHeight + 'px';
      },

       // 获取 轮播图 数据-------------------------------------------------------
        async getSwiperData(){
          const res = await this.request({
            url:"/api/public/v1/home/swiperdata"
          })
          
          // console.log(res)
          this.swiperArr = res
        },

       // 获取 导航栏 数据-------------------------------------------------------
        async getNavData(){
          const res = await this.request({
            url:"/api/public/v1/home/catitems"
          })

          // console.log(res)
          this.navArr = res
        },

       // 获取 楼层 数据-------------------------------------------------------
        async getFloorsData(){
          const res = await this.request({
            url:"/api/public/v1/home/floordata"
          })

          // console.log(res)
          this.floorsArr = res
        },

        // 当点击底部的 返回按钮 时，页面回到顶部--------------------------------
        goTop(){
          // 调用API--> pageScrollTo  并传入参数  让卷起的距离为0，即可 返回顶部
          // wx.pageScrollTo(Object object)  将页面滚动到目标位置
          // 参数：scrollTop ---> 滚动到页面的目标位置，单位 px
          // 当滚动的距离为0时，即可回到顶部
          uni.pageScrollTo({scrollTop:0})
        }
    },

  // 在 onLoad() 生命周期函数中 调用方法 渲染页面-----------------------------
    onLoad(){
      this.getSwiperData()
      this.getNavData()
      this.getFloorsData()
    },

    // 监听用户下拉动作,当用户下拉刷新页面时，调用函数，重新渲染页面-----------------------------------
    // 使用async  await语法，保证请求完毕后，结束下拉效果
    async onPullDownRefresh(){
      await this.getSwiperData()
      await this.getNavData()
      await this.getFloorsData()

      // 更新完成后，调用API 停止 下拉刷新动画效果----------------------------------------
      uni.stopPullDownRefresh()
    },

    // 页面滚动触发事件的处理函数----------------------------------------
    onPageScroll(e){
      // console.log(e.scrollTop)
      if (e.scrollTop>200) {
          this.isShow = true
      }else {
          this.isShow = false
      }
    }

  }
</script>

<style scoped lang="less">
  .banner {
    width: 100%;
    height: 340rpx;

    image {
      width: 100%;
      height: 340rpx;
    }
  }

  .navs {
    display: flex;
    justify-content: space-between;
    padding: 30rpx 44rpx;

    image {
      width: 128rpx;
      height: 140rpx;
    }
  }

  .floor {

    .title {
      width: 750rpx;
      height: 60rpx;
      padding: 20rpx 0 0 8rpx;
      background-color: #f4f4f4;
    }

    .items {
      padding: 20rpx 16rpx;
      overflow: hidden;

      navigator {
        width: 193rpx;
        height: 188rpx;
        margin-left: 10rpx;
        margin-bottom: 10rpx;
        float: left;
      }

      navigator:first-child {
        width: 232rpx;
        height: 386rpx;
        margin-left: 0rpx;
      }

      navigator:nth-child(2),
      navigator:nth-child(5) {
        width: 273rpx;
      }
    }

    &:first-child {

      .items {

        navigator {
          width: 233rpx;
        }
      }
    }
  }

  .goTop {
    position: fixed;
    bottom: 30rpx;
    /* #ifdef H5 */
    bottom: 65px;
    /* #endif */
    right: 30rpx;
  
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100rpx;
    height: 100rpx;
    font-size: 48rpx;
    color: #666;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
  }
</style>